<template>
  <view class="report-container">
    <view class="report-header">
      <text class="report-title">面试报告详情</text>
    </view>
    
    <view class="report-content" v-if="detail">
      <view class="section">
        <text class="section-title">基本信息</text>
        <view class="info-item">
          <text class="label">岗位名称：</text>
          <text class="value">{{ detail.positionName }}</text>
        </view>

        <view class="info-item">
          <text class="label">综合得分：</text>
          <text class="value score">{{ detail.overallScore }}</text>
        </view>
      </view>
      
      <view class="section">
        <text class="section-title">优势</text>
        <text class="content-text">{{ detail.strengths }}</text>
      </view>
      
      <view class="section">
        <text class="section-title">不足</text>
        <text class="content-text">{{ detail.weaknesses }}</text>
      </view>
      
      <view class="section">
        <text class="section-title">建议</text>
        <text class="content-text">{{ detail.suggestions }}</text>
      </view>
      
      <view class="section">
        <text class="section-title">维度详情</text>
        <view 
          class="dimension-item" 
          v-for="dimension in detail.dimensionDetails" 
          :key="dimension.id"
        >
          <view class="dimension-header">
            <text class="dimension-name">{{ dimension.dimensionName }}</text>
            <text class="dimension-score">得分：{{ dimension.score }}</text>
          </view>
          <text class="dimension-evaluation">{{ dimension.evaluation }}</text>
        </view>
      </view>
    </view>
    
    <view class="loading" v-else>
      <!-- <u-loading></u-loading> -->
    </view>
  </view>
</template>

<script>
import { reportDetail } from '@/api/interview/report.js'

export default {
  data() {
    return {
      detail: null
    }
  },
  onLoad(options) {
    if (options.id) {
      this.getReportDetail(options.id)
    }
  },
  methods: {
    getReportDetail(reportId) {
      reportDetail(reportId).then(res => {
        this.detail = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.report-container {
  padding: 30rpx;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.report-header {
  margin-bottom: 40rpx;
  
  .report-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #303133;
  }
}

.section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
    margin-bottom: 20rpx;
    display: block;
  }
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  
  .label {
    color: #606266;
    font-size: 28rpx;
    width: 160rpx;
  }
  
  .value {
    color: #303133;
    font-size: 28rpx;
    flex: 1;
    
    &.score {
      color: #2979ff;
      font-weight: bold;
    }
  }
}

.content-text {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.6;
}

.dimension-item {
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 2rpx solid #f5f7fa;
  
  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    .dimension-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #303133;
    }
    
    .dimension-score {
      font-size: 28rpx;
      color: #2979ff;
    }
  }
  
  .dimension-evaluation {
    font-size: 28rpx;
    color: #606266;
    line-height: 1.6;
  }
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400rpx;
}
</style> 
</style> 